<script setup lang="ts">
defineOptions({
  name: 'LayoutTitle',
})

const logoSrc = `${import.meta.env.BASE_URL}logo.svg`
const text = '工时系统'
</script>

<template>
  <ElLink
    href="/"
    class="the-title"
    :title="text"
    :underline="false"
  >
    <img
      class="logo"
      :src="logoSrc"
      alt="logo"
    >
    <span class="text">{{ text }}</span>
  </ElLink>
</template>

<style lang="scss" scoped>
.the-title {
  height: 50px;

  .logo {
    $size: 30px;

    width: $size;
    height: $size;
  }

  .text {
    color: #fff;
  }

  .logo + .text {
    margin-left: 10px;
  }
}
</style>
